<template>
  <div class="wrap">

    <!-- <One msg="study one.vue" /> -->

    <!-- <First></First> -->

    <!-- <AllRef/> -->

    <!-- <AllReactive/> -->

    <!-- <To/> -->

    <!-- <Watch/> -->

    <!-- <Computed/> -->

    <!-- <Parent/> -->


    <!-- <Com/> -->

    <!-- <Slot/> -->

    <!-- <Susp/> -->

    <!-- <Butn 
    babel="安全"
    buttonTxt="确定"
    :customCls="mycustomCls"
    :clickFn="clickFn"
    /> -->

    <!-- <DiguiParent/> -->

    <!-- <Keepalive/> -->

    <!-- <Tele/> -->

    <!-- <div class="provide-box">
      <h3 @click="selfchangeData">{{data}}</h3>
        <Prov
        @my-change="changeData"
        />
    </div> -->

    <!-- <Bus/> -->

    <!-- <Transi/> -->

  <!-- <Tsx
  color="red"
  @on-click="tsxFn"
  /> -->

  <!-- <TransiGroup/> -->

  <!-- <Directive/> -->

  <!-- <Hook hookname="hook1" color="red"/> -->

  <!-- <Pinia/> -->

  <!-- <Router/> -->
  <!-- <Router-two/> -->
  <!-- <RouterBA/> -->
  <!-- <RouterFour/> -->

  <!-- 如果使用原生webComponent传参数是引用类型必须序列化 -->
  <!-- <mingle-btn :title="JSON.stringify(customElementsTitle)"/> -->
  <!-- <mingle-btn :title="JSON.stringify(customElementsTitle2)"/> -->

  <!-- 函数式编程定义组件 -->
 <!-- <HBth @onMyClick="onMyClickFn" text="按钮">
    <template #default>
      <div>
            我是插槽呀
      </div>
    </template>
 </HBth> -->

 <!-- postcss-px-to-viewport插件的使用 -->
 <!-- <div class="postcss-px"></div> -->

 <!-- unocss原子化 -->
 <!-- <div class="unocss-wrap">
  <li class="m-1 pink">1</li>
  <li class="m-2 pink">2</li>
  <li class="m-1 pink">3</li>
 </div> -->

 <!-- Vue响应性语法糖 -->
 <!-- <ReactivityTransform/> -->

 <!-- 环境变量 -->
<!-- <Env/> -->


<!-- vue3中css新特性 -->
<NewcssStyle>
  <div class="NewcssStyle-a">我是默认卡槽的自定义内容</div>
</NewcssStyle>

  </div>
</template>

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
// import One from './components/one.vue'
import First from './pages/first.vue';
import  AllRef from './pages/allref.vue';
import  AllReactive from './pages/allreactive.vue';
import  To from './pages/to.vue';
import  Watch from './pages/watch.vue';
import Computed from './pages/computed.vue';
import Parent from './pages/parent.vue';
import Com from './pages/component.vue';
import Slot from './pages/slot.vue';
import Susp from './pages/susp.vue';
import DiguiParent from './pages/diguiParent.vue';
import Keepalive from './pages/keepAlive.vue';
import Tele from './pages/tele.vue';
import Prov from './pages/provide.vue';
import Bus from './pages/bus.vue';
import Transi from './pages/transi.vue';
import Tsx from './tsx/index';
import TransiGroup from './pages/transi-group.vue';
import Directive from './pages/directive.vue';
// import loading from './plugin/loading/loading.vue';
import Hook from './pages/hook.vue';
import Pinia from './pages/pinia.vue';
import Router from './pages/router.vue';
import RouterTwo from './pages/router-two.vue';
import RouterBA from './pages/routeBA.vue';
import RouterThree from './pages/route-three.vue';
import RouterFour from './pages/router-four.vue';
import { reactive } from '@vue/reactivity';
import ReactivityTransform from './pages/reactivityTransform.vue';
import Env from './pages/env.vue';
import NewcssStyle from './pages/newcssStyle.vue';
import { createRenderer, getCurrentInstance, provide } from '@vue/runtime-core';
import { ComponentInternalInstance, ref } from 'vue';

// h函数式组件
import { HBth } from './components/hComponent.ts';

// 使用原生webComponent---------------------------------------------
import { defineCustomElement } from 'vue';
//自定义元素模式  要开启这个模式，只需要将你的组件文件以 .ce.vue 结尾即可
import customVueVue from './components/mingleBtn.ce.vue'
const Btn = defineCustomElement(customVueVue);
customElements.define('mingle-btn', Btn);
let customElementsTitle = ref({a: '1'});
let customElementsTitle2 = ref(999);




let mycustomCls = reactive(['green']);
let clickFn = function(e: Event) {
  alert('hello');
};
// provide-inject
interface Data {
  name: string,
  age: number,
  colors: {
    likes: string
  }
}
let data = reactive<Data>({
  name: 'root',
  age: 22,
  colors: {
    likes: 'green'
  }
});
provide('rootData', data);
let changeData = (value: Data ): Data => {
  console.log('changeData Data=>', value);
  data.age = value.age;
  return value;
};
provide('rootchnageFn', changeData);

let selfchangeData = () => {
  console.log('selfchangeData Data=>');
  data.age ++;
};



// tsx的父子传参数
let tsxFn = (e: any) => {
  console.log('tsxFn:', e);
}


//  使用插件
const instance: ComponentInternalInstance = getCurrentInstance();
const loadingPlugin = instance.appContext.config.globalProperties.$Loading;
console.log('instance-插件使用：', instance, loadingPlugin);
// setTimeout(() => {
//   loadingPlugin.show();
// }, 1000);


// 自定义hook将图片转为base64
// imgtobase64();


// h函数组件
let onMyClickFn = function(num: number) {
  alert('onMyClickFn' + num);
}

</script>

<style lang="less">
html {
  font-size: 24.15458vw;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.provide-box {
  font-size: .16rem;
  width: 5rem;
  height: 7rem;
  border: .0033rem solid rgb(33, 153, 244);
}

.wrap {
  font-size: .16rem;
}

.routeFn {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  background-color: antiquewhite;
}


.postcss-px {
  width: 200px;
  height: 200px;
  background-color: antiquewhite;
  border-radius: 10px;
}

.unocss-wrap {
  width: 100px;
  height: auto;
  padding: 10px;
  background-color: #2c3e50;
  li {
    background-color: red;
  }
}
</style>

